<template>
    <div class="publish">
        <div class="pub-top">
            <div class="back">
                <span>X</span>
            </div>
            <div class="sucai">
                <span><span class="iconfont icon-yinfu"></span>选择素材</span>
            </div>
        </div>
        <div class="me-tab">
                <div class="me-navbar">
                    <div class="item " @click="changeTab(0)" :class="indexTab==0?'active':''">作品23</div>
                    <div class="item"  @click="changeTab(1)" :class="indexTab==1?'active':''">动态33</div>
                </div>
                <div class="tab-wrap">
                    <div class="tab-con" v-show="indexTab===0">
                        <div class="tab-img">
                            <img src="../../static/img/124.jpg" alt="">
                            <img src="../../static/img/125.jpeg" alt="">
                            <img src="../../static/img/126.jpg" alt="">
                        </div>
                    </div>
                    <div class="tab-con" v-show="indexTab===1">2</div>
                </div>
            </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            indexTab:0
        }
    },
    methods:{
        changeTab(index){
            this.indexTab = index
        
        }
    }
}
</script>
<style  scoped>
    .publish{
        background-color: #ccc;
        color: #fff;
    }
    .pub-top{
        height: 44px;
        line-height: 44px;
        display: flex;
        justify-content: center;
        color: #fff;
        background-color: #FFF;
        font-size: 16px;
        position: relative;
    }
    .back{
        position: absolute;
        left: 10px;
    }
    .back span{
        font-size: 28px;
        color: #ccc;
    }
    .sucai span{
        color: #ccc;
    }
    .me-tab{
        height: 300px;
    }
    .me-navbar{
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
    }
    .me-navbar .item{
        padding: 10px 25px;
        flex-grow:1;
        color: #000;
        text-align: center;
        background-color: #fff;
    }
    .me-navbar .active{
        border-bottom: 2px #ffdf0e solid;
        color: #CCC;
    }
    .tab-img img{
        width: 33.3%;
        height: 190px;
    }
</style>